//实现流程
//1.定义购物车模板字符串:分为上下两部分,上:itemTop,下:itemTmpl
//2.将购物车模板字符串转换为jquery对象:$itemTop,$itemTmpl
//3.实现购物车详情面板隐藏和消失:addEvent()中的JQuery的toggle()方法;
//4.购物车数据渲染:
//		1)定义购物车详情模板字符串
//		2)属性购物车数据:$itemTop.find('.shopBar-item').remove();
//		3)模板字符串替换,定义总价,数据挂载
//5.购物车数据加减功能实现
//6.实现气泡数变化
//7.购物车数据和菜单内容数据联动:$('.left-item.active').click();
(function () {
	//定义购物车详情面板模板
	var itemTop = '<div class="shop-pannel hide">' +
						'<div class="clear-shopCar"><a class="clear-shopCar-btn">清空购物车</a></div>'+
				  '</div>';

	//定义购物车模板
	var itemTmpl = '<div class="shop-bar">' +
						'<div class="shop-bar-left">' +
							'<div class="shop-bar-icon">' +
								'<div class="shop-num"></div>'+
							'</div>'+
							'<div class="shop-bar-detail">' +
								'<div class="shop-total">&nbsp;¥<span class="t-price">0</span></div>'+
							    '<div class="shop-sendFee">&nbsp;另需配送&nbsp;¥<span class="sendfee-price">9</span></div>'+
							'</div>'+
						'</div>'+
						'<div class="shop-bar-right">去结算</div>'+
				   '</div>';


	var $itemTop = $(itemTop);
	var $itemTmpl = $(itemTmpl);

	/*
	*关联购物车数据
	 */
	function shopBarList() {
		var tmpl = '<div class="shopBar-item">' +
						'<div class="shopBar-item-name">$name</div>'+
						'<div class="shopBar-item-price">¥<span class="total">$t-price</span></div>'+
						'<div class="shopBar-item-count">' +
								'<div class="subs"></div>'+
								'<div class="num">$num</div>'+
								'<div class="plus"></div>'+
						'</div>'+
				   '</div>';

		$itemTop.find('.shopBar-item').remove();
		var list = window.food_spu_tags || [] ;
		var totalPrice = 0 ;
		list.forEach(function (item) {//循环左列表菜单内容
			item.spus.forEach(function (_item) {//循环菜单内容对应的数据
				if (_item.chooseCount > 0) {
					var price = _item.min_price * _item.chooseCount;//总计菜品数量
					var shopData = tmpl.replace('$name',_item.name)
										.replace('$t-price',price)
										.replace('$num',_item.chooseCount);
					totalPrice += price;//菜品总价
				}
				var $shopData = $(shopData);//转换JQuery对象
				$shopData.data('itemData',_item);//数据挂载,数据名itemData,数据值_item

				$itemTop.append($shopData);
			})

				changeTotalPrice(totalPrice);
				changeRedNum();
		})


	}

	/**
	 * 控制购物车面板内容的显示:点击购物车图标控制面板显示还是隐藏
	 */
	function addEvent() {
		$('.shop-bar').on('click','.shop-bar-icon',function () {
			$('.black-cover').toggle();
			$('.shop-pannel').toggle();
		});

		$itemTop.on('click','.plus',function (e) {
			var count = $(e.currentTarget).parent().find('.shopBar-item-count');
			//console.log('打印增加变化过程'+count.text());
			var $item = $(e.currentTarget).parents('.shopBar-item').first();

			var itemData = $item.data('itemData');

			itemData.chooseCount = itemData.chooseCount + 1;

			shopBarList();

			// 找到当前的右侧详情的数据，进行联动
			$('.left-item.active').click();

		});

		$itemTop.on('click','.subs',function (e) {
			var count = $(e.currentTarget).parent().find('.shopBar-item-count');

			count.text(parseInt(count.text() || '0')-1);
			var $item = $(e.currentTarget).parents('.shopBar-item').first();

			var itemData = $item.data('itemData');

			itemData.chooseCount = itemData.chooseCount - 1;

			shopBarList();

			$('.left-item.active').click();
		});

	}

	//改变购物车总价函数
	function changeTotalPrice(str) {
		$itemTmpl.find('.t-price').text(str);
	}

	//改变红点个数
	function changeRedNum() {
		// 先拿到所有的counts
		var $counts = $('.shopBar-item-count').find('.num');

		var total = 0;


		// 遍历每个count 相加
		for (var i = 0 ; i < $counts.length ; i++) {
			total += parseInt($($counts[i]).text());
		}

		if (total > 0) {
			$('.shop-num').show().text(total);
		} else {
			$('.shop-num').hide();
		}
	}

		function init(data) {
			$('.menu-bottom').append($itemTop);
			$('.menu-bottom').append($itemTmpl);
			addEvent();
		}

		//方法暴露到window下
		window.shopBar = {
			shopBarList:shopBarList//菜单右边加减影响购物车加减

		}

		init();
	})();